/**
 * 彩色运动进度条
 */
import { defineComponent, ref } from 'vue';
import './style.scss';

export default defineComponent({
  name: 'AnimationBar',
  props: {
    value: Number,
    color: Object,
    width: Number,
    option: Object,
  },
  setup: (props) => {
    const barRef = ref();

    return () => {
      const { value = 0, color = {}, option = {} } = props;
      const { bar: barColor, circle: circleColor, circleBorder: circleBorderColor } = color;
      const { height = 8, margin = 8, percentText = {} } = option;
      const width = props.width || barRef?.value?.clientWidth; // 取宽度;
      const colorMargin = margin + 'px'; // 颜色条高度
      const colorHeight = height + 'px'; // 颜色条高度
      const colorValue = (width / 100) * value; // 颜色条长度
      const circleDiam = (height / 2) * 3; // 圆圈直径 大于高度
      const circleMargin = circleDiam - 2;
      const circleBorderWH = circleDiam + circleMargin * 2;
      //   const circleTop = top + 'px';

      return (
        <div
          id="tioBar"
          style={{
            width: width + 'px',
          }}
          ref={barRef}
        >
          {/* 含背景的色条 */}
          <p
            style={{
              width: colorValue + 'px',
              height: colorHeight,
              padding: colorMargin + ' 0px',
            }}
          >
            {/* 彩色条 */}
            <main
              style={{
                background: barColor,
                height: colorHeight,
              }}
            ></main>

            {/* 一侧圆圈 */}
            <div
              id="circle"
              style={{
                width: circleBorderWH + 'px!important',
                height: circleBorderWH + 'px!important',
                border: circleBorderColor ? '2px solid ' + circleBorderColor : '2px solid ' + circleColor + '30',
                // top: circleTop,
                margin,
              }}
            >
              <i
                style={{
                  margin: circleMargin + 'px',
                  width: circleDiam + 'px',
                  height: circleDiam + 'px',
                  background: circleColor,
                }}
              ></i>

              {/* 文字 */}
              <span class="barValue" style={{ ...percentText }}>
                {value.toFixed(2)}%
              </span>
            </div>
          </p>
        </div>
      );
    };
  },
});
